<template>
	<view class="page">
		<div v-if="tabIndex==0">
			<unit-div :userMsg='userMsg'></unit-div>
			<!--检测 -->
			<div v-if="flag==0">
				<div class="myUnit">
					<uni-section class="mySection" title="待办任务" type="line"></uni-section>
					<div style="display: flex;">
						<div class="menuDiv" v-for="item in list" @click="goNav(item)">
							<div class="iconDiv" style="margin: 10px; display: inline-block;">
								<uni-icons :type="item.icon" size="30px" :color='item.color'></uni-icons>
							</div>
							<div class="textDiv">
								<div class="text">{{item.num}}</div>
								<div class="name">{{item.name}}</div>
							</div>
						</div>
					</div>
				</div>
				<div class="myUnit">
					<uni-section class="mySection" title="待办事项" type="line"></uni-section>
					<div class='grid'>
						<div class="grid-item" v-for="item in list2" @click="goNav(item)" style="position: relative;">
							<div class="numTag">
								<u-badge type="error" max="999" :value="item.num"></u-badge>
							</div>
							<div class="iconDiv">
								<uni-icons :type="item.icon" size="30px" :color='item.color'></uni-icons>
							</div>
							<text :color="item.color" class="name">{{item.name}}</text>
						</div>
					</div>
				</div>
			</div>
			<!-- 监管 -->
			<div class="myUnit" v-else>
				<uni-section class="mySection" title="数据总览" type="line"></uni-section>
				<div style="display: flex;">
					<div class="menuDiv2" v-for="item in jgList" @click="goNav(item)">
						<div class="iconDiv" style="display: inline-block;">
							<uni-icons :type="item.icon" size="30px" :color='item.color'></uni-icons>
						</div>
						<div class="textDiv">
							<div class="text">{{item.num}}
								<span class="tipDiv">{{item.unit}}</span>
							</div>
							<div class="name">
								<div>{{item.name}}</div>
								<div class="rightIcon">
									<u-icon name="arrow-right" size='14' color='#999'></u-icon>
								</div>
							</div>
						</div>

					</div>
				</div>
				<div style="display: flex;">
					<div :class="{menuDiv2:item.name}" style="flex: 1;" v-for="item in jgList2" @click="goNav(item)">
						<div class="iconDiv" style="display: inline-block;">
							<uni-icons :type="item.icon" size="30px" :color='item.color'></uni-icons>
						</div>
						<div class="textDiv" v-if='item.name'>
							<div class="text">{{item.num}}
								<span class="tipDiv">{{item.unit}}</span>
							</div>
							<div class="name">
								<div>{{item.name}}</div>
								<div class="rightIcon">
									<u-icon name="arrow-right" size='14' color='#999'></u-icon>
								</div>
							</div>
						</div>
					</div>
				</div>
				<div style="display: flex;">
					<div :class="{menuDiv2:item.name}" style="flex: 1;" v-for="item in jgList3" @click="goNav(item)">
						<div class="iconDiv" style="display: inline-block;">
							<uni-icons :type="item.icon" size="30px" :color='item.color'></uni-icons>
						</div>
						<div class="textDiv" v-if='item.name'>
							<div class="text">{{item.num}}
								<span class="tipDiv">{{item.unit}}</span>
							</div>
							<div class="name">
								<div>{{item.name}}</div>
								<div class="rightIcon" v-if="item.name">
									<u-icon name="arrow-right" size='14' color='#999'></u-icon>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="myUnit">
				<uni-section class="mySection" title="政策规范" type="line"></uni-section>
				<div class='grid'>
					<div class="grid-item" v-for="item in fileList" @click="goNav(item)">
						<div class="iconDiv">
							<uni-icons :type="item.icon" size="30px" :color='item.color'></uni-icons>
						</div>
						<text :color="item.color" class="name">{{item.name}}</text>
					</div>
				</div>
			</div>
			<div class="myUnit" style="position: relative;" v-if="flag==1">
				<div @click="goApproveList()"
					style="display: flex;justify-content: space-between;align-items: baseline;">
					<uni-section class="mySection" title="待办事项" type="line"></uni-section>
					<div style="position: absolute;left: 90px;top: 13px;">
						<u-badge type="error" max="999" :value="needList.length"></u-badge>
					</div>
					<u-icon name="arrow-right" color='#0275a1'></u-icon>
				</div>
				<div class="liDiv" v-for="(item,index) in needList" @click="goDept(item.departmentId)">
					{{index+1}}.{{item.name}}
				</div>
				<div v-if="!needList.length" style="text-align: center;color: #999;padding: 10px;">暂无数据</div>
			</div>
		</div>
	</view>
</template>

<script>
	import {
		getCheckMsg,
		listNeed,
		getDataMsg
	} from "@/api/taskMng/index.js"
	export default {
		data() {
			return {
				flag: 0, //0检测，1监管
				tabIndex: 0,
				userMsg: {
					nickName: '',
					deptName: ''
				},
				needList: [],
				list: [{
						name: '安全交底',
						num: 0,
						icon: 'compose',
						color: '#0275a1',
						url: '/subPage/taskMng/taskPreList'
					},
					{
						name: '外勤作业',
						num: 0,
						icon: 'notification',
						color: '#0275a1',
						url: '/subPage/taskMng/taskList',

					}
				],
				list2: [{
					name: '任务审核',
					num: 0,
					icon: 'checkbox',
					color: '#009688',
					url: '/subPage/approveMng/approveList?flag=0'
				}, {
					name: '作业审核',
					num: 0,
					icon: 'checkbox',
					color: '#00BCD4',
					url: '/subPage/approveMng/approveList?flag=1'
				}, {
					name: '报告审核',
					num: 0,
					icon: 'checkbox',
					color: '#795548',
					url: '/subPage/approveMng/approveList?flag=2'
				}, {
					name: '报告签发',
					num: 0,
					icon: 'checkbox',
					color: '#03A9F4',
					url: '/subPage/approveMng/approveList?flag=3'
				}],
				jgList: [{
					name: '检测机构',
					num: 0,
					unit: '个',
					icon: 'staff',
					color: '#0275a1',
					url: '/subPage/totalMng/deptTotal'
				}, {
					name: '检测人员',
					num: 0,
					unit: '个',
					icon: 'person',
					color: '#009688',
					url: '/subPage/totalMng/userTotal'
				}],
				jgList2: [{
					name: '检测设备',
					num: 0,
					unit: '个',
					icon: 'link',
					color: '#00BCD4',
					url: '/subPage/totalMng/deviceTotal'
				}, {
					name: '工程备案',
					num: 0,
					unit: '个',
					icon: 'map',
					color: '#795548',
					url: '/subPage/totalMng/projectTotal'
				}],
				jgList3: [{
					name: '归档报告',
					num: 0,
					unit: '份',
					icon: 'calendar',
					color: '#3F51B5',
					url: '/subPage/totalMng/reportTotal'
				}, {}],
				fileList: [{
					name: '政策文件',
					icon: 'bars',
					color: '#607D8B',
					url: '/subPage/fileMng/fileList'
				}, {
					name: '规范规程',
					icon: 'list',
					color: '#607D8B',
					url: '/subPage/fileMng/fileList2'
				}, {}, {}]
			}
		},
		// userType 0,1监管，2,3检测，00超管
		methods: {
			show() {
				let form = uni.getStorageSync('storage_data')
				this.userMsg.nickName = form.vuex_nickName
				this.userMsg.deptName = form.vuex_deptName
				this.userMsg.userType = form.vuex_userType
				if (this.userMsg.userType == 2 || this.userMsg.userType == 3) {
					this.flag = 0
				} else {
					this.flag = 1
				}
				this.load()
			},
			goNav(e) {
				uni.navigateTo({
					url: e.url
				})
			},
			goApproveList() {
				uni.navigateTo({
					url: '/subPage/approveMng/approveList?flag=4'
				})
			},
			goDept(departmentId) {
				let req = '?id=' + departmentId + "&flag=" + 0
				uni.navigateTo({
					url: '/subPage/approveMng/deptApproveOk' + req
				})
			},
			load() {
				if (this.flag == 0) {
					getCheckMsg().then(res => {
						let data = res.data
						this.list[0].num = data.safetyDisclosureTotal
						this.list[1].num = data.jobTotal
						this.list2[0].num = data.taskApproveTotal
						this.list2[1].num = data.jobApproveCount
						this.list2[2].num = data.reportApproveCount
						this.list2[3].num = data.reportIssueCount
					})
				} else {
					// 监管
					getDataMsg().then(res => {
						let data = res.data
						this.jgList[0].num = data.departmentTotal
						this.jgList[1].num = data.userTotal

						this.jgList2[0].num = data.deviceTotal
						this.jgList2[1].num = data.engineTotal
						this.jgList3[0].num = data.archiveReportTotal
					})
					listNeed().then(res => {
						this.needList = res.list
					})
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.grid {
		display: flex;
		background: #fff;
	}

	.grid-item {
		flex: 1;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		margin: 5px;
	}

	.grid-item2 {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		width: 25%;
		margin: 5px 0;
		position: relative;
	}

	.iconDiv {
		border-radius: 10px;
		width: 35px;
		height: 35px;
		text-align: center;
		line-height: 35px;
	}

	.numTag {
		position: absolute;
		top: 0;
		right: 0;
	}

	.menuDiv {
		flex: 1;
		height: 60px;
		background: #f3f4f5;
		display: flex;
		align-items: center;
		margin: 5px;
		border-radius: 10px;
		justify-content: center;
	}

	.menuDiv2 {
		flex: 1;
		height: 60px;
		background: #f3f4f5;
		display: flex;
		align-items: center;
		margin: 5px;
		border-radius: 10px;
		justify-content: space-evenly;
	}

	.textDiv {
		// flex: 1;
		text-align: center;
		display: inline-block;
	}

	.text {
		font-size: 20px;
		color: $u-primary;
	}

	.name {
		display: flex;
		align-items: center;
	}

	.liDiv {
		font-size: 14px;
		padding: 5px;
		color: $u-primary;
		border-bottom: 2px dashed #f3f4f5;
	}

	.tipDiv {
		font-size: 13px;
		margin-left: 3px;
	}

	.rightIcon {
		margin-left: 10px;
	}
</style>